<template>
  <div class="box">
    <div class="btn">
      <el-button type="primary" size="small" @click="out"
        >返回列表
        <!-- <router-link class="tiao" to="/detail">返回列表</router-link>  -->
      </el-button>
      <el-button type="primary" size="small" @click="amend">{{
        text
      }}</el-button>
    </div>
    <div class="form-centent">
      <el-form
        :inline="true"
        ref="formData"
        label-width="150px"
        class="demo-form-inline"
      >
        <h2>申请人信息</h2>
        <div class="forData">
          <el-form-item
            class="formItem"
            :label="item.field"
            v-for="(item, index) in formData"
            :key="index"
          >
            <el-input
              :disabled="judeg"
              @blur="alter([item.content, item.fieldEn])"
              v-model="item.content"
            ></el-input>
          </el-form-item>
        </div>

        <div class="forData" v-for="(items, indexs) in formDatas" :key="indexs">
          <h2>共有人{{ indexs + 1 }}</h2>
          <el-form-item
            class="formItem"
            :label="item.field"
            v-for="(item, index) in items.contents"
            :key="index"
          >
            <el-input
              :disabled="judeg"
              @blur="appAlter([item.content, item.fieldEn, indexs])"
              v-model="item.content"
            ></el-input>
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item label="更正事项">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="change"
              minlength="30"
              show-word-limit
            >
            </el-input>
            <p class="hint">
              <span style="color:red"
                >需要将审核没有通过的原因写在左边的文本域内</span
              >
              <span>给用户的反馈</span>
            </p>
          </el-form-item>

          <el-form-item label="审核备注">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="remark"
              minlength="30"
              show-word-limit
            >
            </el-input>
            <p class="hint"><span>给用户的反馈</span></p>
          </el-form-item>
        </div>
        <div class="btn">
          <el-button type="primary" size="small" @click="pass(2)"
            >审核通过</el-button
          >
          <el-button type="primary" size="small" @click="pass(3)"
            >打回更正
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import union from "@/assets/unionSet.json";
export default {
  data() {
    return {
      judeg: true,
      text: "点击修改",
      change: "",
      remark: "",
      data: {},
      append: [],
      formData: [],
      formDatas: [],
      contrast: {},
    };
  },
  methods: {
    //退出按钮
    out() {
      this.$router.push({
        path: "/detail",
        query: {
          dan_number: this.$store.state.conId.num,
        },
      });
    },
    //提交修改
    amend() {
      this.judeg = !this.judeg;
      this.text = !this.judeg ? "保存修改" : "点击修改";
      if (!this.judeg) return;
      let upUrl = this.$route.query.upUrl;

      this.data.proAppendJson = JSON.stringify(this.append);
      this.$http({
        url: upUrl,
        method: "post",
        data: this.data,
      }).then((result) => {
        //  //console.log(result);
      });
    },
    //通过与未通过
    pass(num) {
      if (num == 3) {
        if (!this.change) {
          return;
        }
      }
      this.$http({
        url: "/trademark/proExmain/toExamine",
        method: "post",
        data: {
          certId: this.$store.state.conId.num,
          classId: this.$store.state.conId.classId,
          commitStatus: num,
          corrections: this.change,
          remarks: this.remark,
        },
        // headers:"'Content-Type':'application/json; charset=utf-8'"
      }).then((result) => {
        // //console.log(result);
      });
    },
    //修改表单信息
    alter([content, field]) {
      for (var key in this.data) {
        // key == field?this.data[key]=content:''
        if (key == field) {
          this.data[key] = content;
        }
      }
    },
    //修改共有人信息
    appAlter([content, field, num]) {
      for (var key in this.append[num]) {
        // key == field?this.data[key]=content:''
        if (key == field) {
          this.append[num][key] = content;
        }
      }
    },
  },
  mounted() {
    let ids = this.$store.state.conId.id;
    let classIds = this.$store.state.conId.classId;

    let url = this.$route.query.url;
    this.$http
      .get(url, {
        params: {
          classId: 3,
          id: 6,
        },
      })
      .then((result) => {
        let append;
        let unions = union;
        if (result.data.data.append) {
          this.append = result.data.data.append;
          this.append.forEach((item, indexs) => {
            this.formDatas.push({
              extra: item.id,
              contents: [],
            });
            for (let key in item) {
              for (let index in unions) {
                if (index == key) {
                  this.formDatas[indexs].contents.push({
                    fieldEn: key,
                    field: unions[index],
                    content: item[key],
                  });
                }
              }
            }
          });
        }
        this.data = result.data.data.data;
        for (let key in this.data) {
          for (let index in unions) {
            if (index == key) {
              this.formData.push({
                fieldEn: key,
                field: unions[index],
                content: this.data[key],
              });
            }
          }
        }
      });
  },
};
</script>
<style lang="less" scoped>
.box {
  padding: 20px;
  .tiao {
    color: #fff;
    text-decoration: none;
  }
  .btn {
    text-align: left;
    .el-button ~ .el-button {
      margin: 0 40px;
    }
  }
  .text {
    position: relative;
    .hint {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      width: 300px;
      height: 100%;
      text-align: left;
      transform: translateX(110%);
    }
  }
  .form-centent {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .el-form {
      margin: 10px 0;
      width: 800px;
      .formItem {
        width: 50%;
        margin-right: 0;
      }
      .btn {
        display: flex;
        justify-content: center;
        width: 100%;
      }
    }
    .el-input/deep/.el-input__inner {
      border: none !important;
    }
    .text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      .el-form-item/deep/.el-textarea__inner {
        width: 500px;
      }
    }
  }
}
</style>
